<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('启用远程搜索')}`">{{ $t('启用远程搜索') }}</t>
            <li>
                当启用了节点过滤功能，且配置<span class="d-code">filter-by-front</span>为
                <span class="s-code">false</span>时，组件内部将禁用前台筛选。
                此时，筛选输入框右侧会显示查询按钮，点击按钮或敲回车均会触发查询操作，并抛出
                <span class="d-code">search</span>事件，参数为筛选框内输入的文本内容
            </li>
            <li>
                你可以监听<span class="d-code">search</span>事件，并手动更改
                <span class="d-code">request-config</span>内的接口配置项，
                组件内部会根据<span class="d-code">request-config</span>的配置变化自动请求接口，从而获取最新数据
            </li>
            <li>此处示例请求的接口是由本地json数据模拟的，查询结果不一致属于正常，你可以打开<span class="s-code">F12</span>查看接口请求情况</li>
        </template>
        <sib-tree
            filterable
            style="height: 300px;"
            :filter-by-front="false"
            :request-config="requestConfig"
            @search="onSearch">
        </sib-tree>
    </example>
</template>

<script>
import { reactive } from 'vue';

export default {
    setup() {
        const requestConfig = reactive({
            url: '/api/tree-data.json',
            method: 'get',
            params: {},
        });
        return {
            requestConfig,
            onSearch(keyword) {
                console.log('keyword: ', keyword);
                requestConfig.params.keyword = keyword;
            },
            templateString: `<template>
    <div class="example-box">
        <sib-tree
            filterable
            style="height: 300px;"
            :filter-by-front="false"
            :request-config="requestConfig"
            @search="onSearch">
        </sib-tree>
    </div>
</template>

<script>
import { reactive } from 'vue';

export default {
    setup() {
        const requestConfig = reactive({
            url: '/api/tree-data.json',
            method: 'get',
            params: {},
        });
        return {
            requestConfig,
            onSearch(keyword) {
                console.log('keyword: ', keyword);
                requestConfig.params.keyword = keyword;
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
